<template>
  <a-card :bordered="false">
    <a-modal
      title="网关模型详情"
      :width="1200"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleCancel"
      @cancel="handleCancel">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="0" style="margin-bottom: 1vw;">
            <a-col :md="12" :sm="24">
              <a-button
                class="btn_search_reset"
                @click="() => { $refs.table.refresh() }"
              >
                <a-icon type="reload"/>
                刷新
              </a-button>
            </a-col>
            <a-col :md="12" :sm="24">
            <span class="table-page-search-submitButtons" style="float: right;">
              <a-button type="primary" class="btn_add" @click="registerSample()" icon="plus">手动上传样本</a-button>
              <a-button type="primary" class="btn_add" @click="registerNormalModel()">注册正样本</a-button>
              <a-button type="primary" class="btn_add" @click="registerModel">注册故障</a-button>
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <s-table
        id="table-wrapper"
        ref="table"
        size="middle"
        :columns="columns"
        :data="loadData"
        :alert="true"
        :rowKey="(record) => record.id"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >

      <span
        slot="fileId"
        slot-scope="text, record">
        <a @click="$refs.playForm.play(record)">{{ text === null || text === '' ? '无' : '播放' }}</a>
      </span>

      </s-table>
    </a-modal>

    <play-form ref="playForm"/>
    <register-form ref="registerForm" @ok="handleTaskOk"/>
    <register-normal-form ref="registerNormalForm" @ok="handleTaskOk"/>
    <task-progress-dlg ref="taskProgressDlg" @ok="handleOk"/>
    <batch-register-form ref="batchRegisterForm" @ok="handleOk"/>
  </a-card>
</template>

<script>
  import { STable } from '@/components'
  import { pageList } from '@/api/modular/main/bizcollectionsamplemanage/bizCollectionSampleManageManage'
  import playForm from '../bizcollectionsamplemanage/playForm'
  import registerForm from '../bizcollectionsamplemanage/registerForm'
  import registerNormalForm from '../bizcollectionsamplemanage/registerNormalForm'
  import taskProgressDlg from '../bizcollectionsamplemanage/taskProgressDlg'
  import batchRegisterForm from "@/views/main/bizcollectionsamplemanage/batchRegisterForm";


  export default {
    components: {
      STable,
      registerForm,
      registerNormalForm,
      taskProgressDlg,
      playForm,
      batchRegisterForm
    },
    data () {
      return {
        queryParam: {}, // 查询参数
        visible: false,
        confirmLoading: false,
        columns: [
          // 表头
          {
            title: '网关名称',
            dataIndex: 'gatewayName'
          },
          {
            title: '通道',
            dataIndex: 'gatewayChannel',
            width: 50
          },
          {
            title: '上报时间',
            dataIndex: 'createAt',
            align: 'center',
            width: 150
          },
          {
            title: '文件',
            dataIndex: 'fileId',
            scopedSlots: { customRender: 'fileId' },
            with: 50,
            align: 'center'
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: (parameter) => {
          return pageList(Object.assign(parameter, this.queryParam)).then((res) => {
            return res.data
          })
        },
        selectedRowKeys: [],
        selectedRows: []
      }
    },
    methods: {
      init (record) {
        this.queryParam.gatewayId = record.gatewayId
        this.queryParam.gatewayChannel = record.gatewayChannel
        try {
          this.$refs.table.refresh()
        } catch (e) {
          // 首次进入界面，因表格加载顺序，会抛异常，我们不予理会
        }
        this.visible = true
      },
      handleCancel () {
        this.queryParam = {}
        this.visible = false
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      handleTaskOk (record) {
        this.$refs.taskProgressDlg.init(record)
      },
      handleOk () {
        this.$refs.table.refresh()
      },
      // 注册故障
      registerModel () {
        if (this.selectedRows.length < 3 || this.selectedRows.length > 5) {
          this.$message.error('请选择3到5个文件')
          return
        }
        if (this.validSelectRows() === false) {
          return
        }
        const fileIds = []
        for (let i = 0; i < this.selectedRows.length; i++) {
          fileIds.push(this.selectedRows[i].fileId)
        }
        const record = {
          fileIds: fileIds,
          channel: this.channel
        }
        this.$refs.registerForm.toRegister(record)
      },
      //手动上传样本
      registerSample(){
        const record = {
          gatewayId: this.queryParam.gatewayId,
          channel: this.queryParam.gatewayChannel
        }
        this.$refs.batchRegisterForm.batchReg(record)
      },

      // 注册正样本
      registerNormalModel () {
        if (this.selectedRows.length < 3 || this.selectedRows.length > 5) {
          this.$message.error('请选择3到5个文件')
          return
        }
        if (this.validSelectRows() === false) {
          return
        }
        const fileIds = []
        for (let i = 0; i < this.selectedRows.length; i++) {
          fileIds.push(this.selectedRows[i].fileId)
        }
        const record = {
          fileIds: fileIds,
          channel: this.channel
        }
        this.$refs.registerNormalForm.init(record)
      },
      validSelectRows () {
        // 遍历所有选择，进行网关、通道是否相同的判断
        const infoSet = new Set()
        this.selectedRows.forEach(item => {
          this.channel = item.gatewayChannel
          infoSet.add(item.gatewayCode + item.gatewayChannel)
        })
        if (infoSet.size > 1) {
          this.$message.error('请选择相同网关相同通道的文件')
          return false
        }
        return true
      }
    }
  }
</script>
<style scoped lang="less">
  .table-page-search-wrapper {
    .ant-row {
      margin-left: 0px !important;
    }
  }
</style>